<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Proxy</title>
	</head>
	<body>
		<div id="app">
			hello
		</div>
	</body>
	<script>
		// 模拟Vue中的data选项
		let data = {
			msg: 'hello',
			count:10
		}
		// 模拟Vue的实例
		let vm = {}
		proxyData(data)
		
		function proxyData(data) {
			// 遍历data对象的所有属性
			Object.keys(data).forEach(key => {
				// 数据劫持:当访问或者设置vm中的成员的时候,做一些干预操作
				Object.defineProperty(vm, key, {
					// 可枚举(可遍历)
					enumerable:true,
					// 可配置(可以使用delete删除，可以通过defineProperty重新定义)
					configurable:true,
					// 当获取值的时候执行
					get() {
						console.log('get',key,data[key])
						return data[key]
					},
					// 当设置值的时候执行
					set(newValue) {
						console.log('set',key, newValue)
						if(newValue === data[key]){
							return
						}
						data[key] = newValue
						// 数据更改,更新DOM
						document.querySelector('#app').textContent = data.msg
					}
				})
			})
		}
		
		// 测试
		vm.msg = 'hello world'
		console.log(vm.msg)
	</script>
</html>
